<template>
  <div class="page-header-index-wide">
    <a-card v-has="'statistical'" :bordered="false" class="overview">
      <a-row ref="Overview" :gutter="[48,48]" type="flex">
        <a-col flex="auto">
          <div class="overviewItem overviewItem2">
            <h3>项目数</h3>
            <div>
              <b>{{ ProjectNumber }}</b>
              <span style="position: absolute;margin-top: 19px"></span>
            </div>
          </div>
        </a-col>
        <a-col flex="auto">
          <div class="overviewItem overviewItem3">
            <h3>通道数</h3>
            <div><b>{{ PassagewayNumber }}</b>
              <span style="position: absolute;margin-top: 19px"></span></div>
          </div>
        </a-col>
        <a-col flex="auto">
          <div class="overviewItem overviewItem4">
            <h3>门禁数量</h3>
            <div><b>{{ DeviceNumber }}</b>
              <span style="position: absolute;margin-top: 19px"></span></div>
          </div>
        </a-col>
        <a-col flex="auto">
          <div class="overviewItem overviewItem2">
            <h3>通行人数</h3>
            <div><b>{{ WalkableNumber }}</b>
              <span style="position: absolute;margin-top: 19px"></span></div>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card v-has="'statistical'" :bordered="false" title="通行人数统计">
          <div ref="chart4" class="chartWrap" id="incomeChartWrap" style="height:300px;">
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card v-has="'statistical'" :bordered="false" title="通行方式占比统计">
          <div ref="chart3" class="chartWrap" id="echartsCont" style="height:300px;">
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card v-has="'statistical'" :bordered="false" title="来访人数统计">
          <div ref="chart1" class="chartWrap" id="incomeChartWrap1" style="height:300px;">
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card v-has="'statistical'" :bordered="false" title="被访人员TOP5">
          <div ref="chart" class="chartWrap" id="CarVolumeChartWrap1" style="height:300px;">
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>

import {
  postAction,
  getAction
} from "@api/manage";

export default {
  name: 'Analysis',
  components: {},
  data() {
    return {
      a:'0',
      ProjectNumber: '0',
      PassagewayNumber: '0',
      DeviceNumber: '0',
      ElevatorNumber: '0',
      WalkableNumber: '0',
      VisitTopEchartNum: [],
      VisitTopEchartName: [],
      VisitNumEchartNumVisit: [],
      VisitNumEchartNumVisited: [],
      VisitNumEchartNumDate : [],
      throughTypeData:[],
      url: {
        AnalysisData: 'dashboard/analysis/AnalysisData',
        getVisitTop: 'dashboard/analysis/getVisitTop',
        getVisitNum: 'dashboard/analysis/getVisitNum',
        getThroughType:'dashboard/analysis/getThroughType',
        getThroughData:'dashboard/analysis/getThroughData'
      },
    }
  },
 async mounted(){
    //被访人员top5
   await this.getVisitTop();
   await this.getThroughType();
    //
    await this.creatEchartNum();
    //通行方式占比统计
    this.getEchartWay();
    //来访人员统计
    this.getVisitNum();
    //基本信息统计
    this.GetAnaliysis();
  },
  methods: {
   async getThroughType(){
      const that = this
     await getAction(this.url.getThroughType,{}).then(res=>{
        if(res.code === 200)
        {
          that.throughTypeData = []
          res.data.forEach(item=>{
            that.throughTypeData.push({
              name:item.type,
              value:item.number
            })
          })
        }
      })
    },
    //生成统计图
   async creatEchartNum() {
      const chart4 = this.$refs.chart4
      if (chart4) {
        let dateData = []
        let numberData = []
       await getAction(this.url.getThroughData,{}).then(res=>{
         if(res.code ===200)
         {
           debugger
           res.data.forEach(item=>{
             dateData.push(item.time)
             numberData.push(item.number)
           })
         }
        })

        const myChart = this.$echarts.init(chart4)
        const option = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dateData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: numberData,
              type: 'line',
              areaStyle: {}
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    },
    getEchartWay() {

      const that = this
      const chart3 = this.$refs.chart3
      if (chart3) {
        const myChart = this.$echarts.init(chart3)
        const option = {
          title: {
            // text: 'Referer of a Website',
            // subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '通行方式占比统计',
              type: 'pie',
              radius: '50%',
              data: that.throughTypeData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }

    },
    //生成统计图
    creatEchartTop() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          xAxis: {
            type: 'category',
            data: this.VisitTopEchartName
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.VisitTopEchartNum,
              type: 'bar'
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    },
    getEchartVisit() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.VisitNumEchartNumDate
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '主动来访',
              type: 'line',
              stack: 'Total',
              data: this.VisitNumEchartNumVisit
            },
            {
              name: '受邀来访',
              type: 'line',
              stack: 'Total',
              data: this.VisitNumEchartNumVisited
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    },
    GetAnaliysis() {
      var Params = {}
      postAction(this.url.AnalysisData, Params).then((res) => {
        if (res.code === 200) {
          this.ProjectNumber = res.data.ProjectNumber ? res.data.ProjectNumber : 0
          this.PassagewayNumber = res.data.PassagewayNumber ? res.data.PassagewayNumber : 0
          this.DeviceNumber = res.data.DeviceNumber ? res.data.DeviceNumber : 0
          this.ElevatorNumber = res.data.ElevatorNumber ? res.data.ElevatorNumber : 0
          this.WalkableNumber = res.data.WalkableNumber ? res.data.WalkableNumber : 0
        }
      })
    },
    RestVisitNumChart(){
      this.VisitNumEchartNumVisit = []
      this.VisitNumEchartNumVisited = []
      this.VisitNumEchartNumDate = []
    },
    //来访人员统计
    getVisitNum(){
      this.RestVisitNumChart()
      let visitFlag = 0
      let visitedFlag = 0
      getAction(this.url.getVisitNum).then((res) => {
        if (res.code === 200){
          debugger
          res.data.forEach((VisitNumData) => {
            debugger
            if(this.VisitNumEchartNumDate.indexOf(VisitNumData.visitTime) === -1){
              this.VisitNumEchartNumDate.push(VisitNumData.visitTime)
              res.data.forEach((VisitNumData2) => {
                if (VisitNumData2.sourceType === 1 && VisitNumData2.visitTime === VisitNumData2.visitTime){
                  this.VisitNumEchartNumVisit.push(VisitNumData2.visitNum)
                  visitFlag = 1
                }else if(VisitNumData2.sourceType === 2 && VisitNumData2.visitTime === VisitNumData2.visitTime){
                  this.VisitNumEchartNumVisited.push(VisitNumData2.visitNum)
                  visitedFlag = 1
                }
                if (visitFlag === 0){
                  this.VisitNumEchartNumVisit.push(0)
                }else if(visitedFlag === 0){
                  this.VisitNumEchartNumVisited.push(0)
                }
                visitFlag = 0
                visitedFlag = 0
              })
            }else{
              res.data.forEach((VisitNumData2) => {
                if (VisitNumData2.sourceType === 1 && VisitNumData2.visitTime === VisitNumData2.visitTime){
                  this.VisitNumEchartNumVisit.push(VisitNumData2.visitNum)
                  visitFlag = 1
                }else if(VisitNumData2.sourceType === 2 && VisitNumData2.visitTime === VisitNumData2.visitTime){
                  this.VisitNumEchartNumVisited.push(VisitNumData2.visitNum)
                  visitedFlag = 1
                }
                if (visitFlag === 0){
                  this.VisitNumEchartNumVisit.push(0)
                }else if(visitedFlag === 0){
                  this.VisitNumEchartNumVisited.push(0)
                }
                visitFlag = 0
                visitedFlag = 0
              })
            }
          })
          this.getEchartVisit()
        }
      })
    },
    ResetTopChart(){
      this.VisitTopEchartName = []
      this.VisitTopEchartNum = []
    },
    //被访人员top5
    getVisitTop(){
      this.ResetTopChart()
      getAction(this.url.getVisitTop).then((res) => {
        if(res.code === 200){
            res.data.forEach((VisitData) => {
              this.VisitTopEchartName.push((VisitData.userName))
              this.VisitTopEchartNum.push(VisitData.visitNum)
            })
          this.creatEchartTop()
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.ant-card {
  margin-top: 24px;
}

.overview {
  color: #fff;

  .overviewItem {
    text-align: center;
    padding: 20px 0;
    border-radius: 8px;
    box-shadow: 0px 4px 6px 0px rgba(93, 49, 252, 0.2);
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .overviewItem1 {
    background-image: url("~@assets/bg1.png");
  }

  .overviewItem2 {
    background-image: url("~@assets/bg2.png");
  }

  .overviewItem3 {
    background-image: url("~@assets/bg3.png");
  }

  .overviewItem4 {
    background-image: url("~@assets/bg4.png");
  }

  h3 {
    font-size: 20px;
    color: inherit;
    font-weight: normal;
    width: 6em;
    margin: auto;
  }

  b {
    font-size: 30px;
    width: 100%;
  }
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
</style>